<template>
    <div>
        <div class="content">
            <div class="tab-in">
                <text  :class="[selectedTypeId==0?'tab-in-item-active':'tab-in-item']"  @click="changeType(0)" tabId="0">全部</text>
                <text v-for="type in dataTypeList"  :class="[selectedTypeId==type.id?'tab-in-item-active':'tab-in-item']"  @click="changeType(type.id)" :tabId="type.id">{{type.label}}</text>
            </div>
            <div class="work-list">
                <div class="cell  category2"  v-for="item in dataList">
                    <div class="cell-info">
                        <text class="title">{{item.title}}</text>
                        <div class="s-t">
                            <text class="green category">{{item.homeworkTypeLabel}}</text>
                            <text class="time">{{item.createdAt}}</text>
                        </div>
                        <image style="width:1px;height:121px;position: absolute;right: 1px;top:0" src="../../resource/img/devide.jpg"></image>
                    </div>
                    <div class="download">
                        <text class="gray">已下载：{{item.downNum}}</text>
                        <div class="down">
                            <image style="width: 22px;height:20px;margin-right: 10px;" src="../../resource/img/dl.png"></image>
                            <text class="down-text" @click="download(item.filePath)">立即下载</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <AppHeader :title="headerTitle" :showBack=true></AppHeader>
    </div>
</template>
<style scoped>
    .content{
        background-color: #f2f2f2;
        margin-top: 88px;
        height: 1246px;
        padding-bottom: 100px;
    }
    .work-list{
        background-color: #ffffff;
        margin-top: 78px;
    }
    .tab-in{
        flex-direction: row;
        background-color: #f3f7fa;
        border-bottom-style: solid;
        border-bottom-width:1px;
        border-bottom-color: #e9edf0;
        position: fixed;
        top:88px;
    }
    .tab-in-item{
        color: #2e2e2e;
        font-size: 28px;
        padding-top: 22px;
        height: 78px;
        width: 187px;
        text-align: center;
        border-bottom-width:0;
        border-bottom-style:none;
    }
    .tab-in-item-active{
        font-size: 28px;
        padding-top: 22px;
        height: 78px;
        width: 187px;
        text-align: center;
        border-bottom-width:0;
        border-bottom-style:none;
        border-bottom-style: solid;
        border-bottom-width:2px;
        border-bottom-color: #42b7ff;
        color: #42b7ff;
    }
    .cell{
        border-bottom-style: solid;
        border-bottom-width:1px;
        border-bottom-color: #e9edf0;
        padding-bottom: 36px;
        padding-top: 36px;
        flex-direction: row;
        padding-left: 24px;
        padding-right: 30px;
        height: 200px;
        margin-bottom: 2px;
        justify-content: space-between;
        width: 750px;
    }
    .title{
        font-size: 28px;
        line-height: 30px;
    }
    .s-t{
        flex-direction: row;
        margin-top: 20px;
        width: 470px;
        justify-content: space-between;

    }
    .time{
        font-size: 26px;
        color: #bbbbbb;
    }
    .cell-info{
        width: 500px;
        position: relative;
        padding-right: 30px;
    }
    .download{
        flex:auto;
        padding-top: 10px;
    }
    .down{
        flex-direction: row;
        background-color: #42b7ff;
        border-radius: 10px;
        padding-top: 20px;
        padding-bottom:20px;
        width: 160px;
        justify-content: center;
    }
    .down-text{
        font-size: 24px;
        text-align: center;
        color: #ffffff;
    }
    .gray{
        color: #a5a5a5;
        font-size: 24px;
        margin-bottom: 10px;

    }
    .green{
        color: #45d100;
    }
    .blue{
        color: #51cbe2;
    }
    .orange{
        color: #f9c939;
    }
    .category{
        font-size: 26px;
    }
    .category1{
        border-left-style: solid;
        border-left-width: 6px;
        border-left-color: #45d100;
    }
    .category2{
        border-left-style: solid;
        border-left-width: 6px;
        border-left-color: #51cbe2;
    }
    .category3{
        border-left-style: solid;
        border-left-width: 6px;
        border-left-color: #f9c939;
    }

</style>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'
     const modal = weex.requireModule('modal')

    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data() {
            return {
                headerTitle:"学习互动",
                selectedTypeId:0,
                dataTypeList:[],
                showLoading:"hide",
                dataList:[]
            }
        },
        created(){
            let self=this;
            self.loadTypeList();
            self.loadDataList();
        },
        methods: {
            download:function(filePath){
                  let self=this;

            },
            changeType(type){
                this.selectedTypeId=type;
                this.loadDataList();
            },
            onloading (event) {
                this.showLoading = 'show';
                let self=this;

                self.request({
                     type:"post",
                    url:"/findHomeworkListByType",
                    data:{
                        "access_token":self.accessToken
                    }
                }).then(res=>{
                    if(res.status==1){
                    self.dataList = self.dataList.concat(res.data.dataList);
                    this.showLoading = 'hide'
                }
            });
            },
            loadDataList(){
                let self=this;
                self.request({
                    type:"post",
                    url:"/findHomeworkListByType",
                    data:{
                        "access_token":self.accessToken,
                        "homeworkTypeId":self.selectedTypeId
                    }
                }).then(res=>{
                    console.log(res);
                    if(res.status==1){
                        self.dataList = res.data.homeworks;
                    }
                });
            },
            loadTypeList(){
                    let self=this;
                    self.request({
                        type:"post",
                        url:"/getDictInfo",
                        data:{
                            "access_token":self.accessToken,
                            "type":"HOMEWORK_TYPE"
                        }
                    }).then(res=>{
                        if(res.status==1){
                            self.dataTypeList = res.data.dict_list;
                        }
                });

            }
        }
    }
</script>

